<template>
	<view class="module_icon_wrap">
		<!-- 	<image class="module_icon_image" v-if="props.icon=='my-business-card'" src="../images/my-business-card.svg" mode=""></image>
		<image class="module_icon_image" v-if="props.icon=='edit-business-card'" src="../images/edit-business-card.svg" mode=""></image>
		<image class="module_icon_image" v-if="props.icon=='business-card-holder'" src="../images/business-card-holder.svg" mode=""></image>
		<image class="module_icon_image" v-if="props.icon=='service-manual'" src="../images/service-manual.svg" mode=""></image> -->
		<!-- 我的名片 -->
		<image class="module_icon_image" v-if="props.icon == 'my-business-card'" src="../images/my_mp.svg" mode="" ></image>

		<!-- 修改名片 | 创建名片 -->
		<image class="module_icon_image" v-if="props.icon == 'edit-business-card'" src="../images/edit_mp.svg" mode="" ></image>

		<image class="module_icon_image" v-if="props.icon == 'create-business-card'" src="../images/create_mp.svg" mode="" ></image>

		<!-- 名片夹 -->
		<image class="module_icon_image" v-if="props.icon == 'business-card-holder'" src="../images/mpj.svg" mode=""></image>

		<!-- 使用手册 -->
		<image class="module_icon_image" v-if="props.icon == 'service-manual'" src="../images/sysc.svg" mode="" ></image>
	</view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
	name: 'ModuleIcon'
})
</script>
<script setup>
import { useUserStore } from '@/stores/user.js'

const userStore = useUserStore()
const props = defineProps(['icon', 'size', 'data'])

// 模块点击事件
// const moduleClick = (ml) => {
// 	console.log('1111', 1111)
// 	// 先判断是否登录，如果已经登录则执行跳转，如果没有登录则弹窗提示登录
// 	if (!userStore.isLogin) {
// 		uni.showToast({
// 			title: '请先登录',
// 			mask: true,
// 			duration: 1000,
// 			icon: 'error'
// 		})
// 		return
// 	}

// 	console.log('path', ml.path)
// 	let tPath = ml.path
// 	switch (ml.name) {
// 		case 'myBusinessCard':
// 			tPath = tPath + `?beDisplayedUserId=${1}&beDisplayedUserName=${'王伟伦'}`
// 			break

// 		case 'createBusinessCard':
// 			break

// 		case 'businessCardHolder':
// 			break
// 		case 'serviceManual':
// 			break

// 		default:
// 			break
// 	}

// 	uni.navigateTo({
// 		url: tPath
// 	})
// }
</script>

<style lang="scss" scoped>
	.module_icon_wrap{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	
.module_icon_image {
	// width: 46px;
	// height: 46px;
	width: 58vw;
	height: 12.95vh;
	box-shadow: 1.2px 1.2px 2.2px #cacaca !important;
	border-radius: 14px;
	overflow: hidden;
	transition: 0.3s;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.module_icon_image::after {
	content: '';
	position: absolute;
	inset: -20%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%);
	animation: shark-wrap 1.5s infinite;
	transform: translateX(-100%);
}

@keyframes shark-wrap {
	to {
		transform: translateX(100%);
	}
}

.module_icon_image:active {
	transform: scale(0.84);
}
</style>
